<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title></title>
</head>
<body>
	<div id='app' >
		<a href="https://www.jianshu.com/p/62f25ed4fb08">参考资料</a>
    	<p v-gqs v-if="show">v-if是删除或者新建dom元素,它会触发unbind指令声明周期吗?</p>
    	<button @click="show=!show">toggle</button>
  		
  		<p v-gqs v-show="show2" style="display:block|none">v-show设置元素的display:block|none,会触发componentUpdated事件</p>
    	<button @click="show2=!show2">toggle-v-show</button>

  	</div>

</body>
</html>

<script type="text/javascript">
	Vue.directive('gqs',{
	    bind() {
	      // 当指令绑定到 HTML 元素上时触发.**只调用一次**
	      console.log('bind triggerd')
	    },
	    inserted() {
	      // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
	      console.log('inserted triggerd')
	    },
	    update() {
	      // 所在组件的`VNode`更新时调用.
	      console.log('update triggerd')
	    },
	    componentUpdated() {
	      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
	      console.log('componentUpdated triggerd')
	      
	    },
	    unbind() {
	      // 只调用一次，指令与元素解绑时调用.
	      console.log('unbind triggerd')
	    }
  	})
	new Vue({
		el:'#app',
		data:{
			show:true,
			show2:true,
		},
	})
</script>